expandir para código
DiagrammeR::grViz("
digraph shiny_diagram {
rankdir=TB; // Dirección de arriba hacia abajo
// Fondo general
bgcolor='#F7F7F7';
// Estilo de nodos
graph [fontname='storia-sans'];
node [shape=box, style=filled, fontname='storia-sans', fontsize=14, color=gray90];
edge [fontname='storia-sans', fontcolor=black, fontsize=12];
// Cluster UI
subgraph cluster_UI {
label = 'UI (Frontend)';
color = '#B03A2E'; // Color del borde del cluster
style = rounded;
fillcolor = '#F1948A'; // Fondo claro
UI_input [label = 'Input', fillcolor='#9682fc50', color='#9682fc'];
UI_output [label = 'Output', fillcolor='#01c9ad50', color='#01c9ad'];
}
// Nodo del servidor
SERVER [label = 'Server (Backend)', shape=ellipse, fillcolor='#F1948A', color='#619CFF', style=solid];
// Conexiones con etiquetas
UI_input -> SERVER [label = 'Datos del\nusuario', fontname='storia-sans', fontcolor=black, fontsize=12];
SERVER -> UI_output [label = 'Resultados', fontname='storia-sans', fontcolor=black, fontsize=12];
// Alineación lógica
{rank=same; UI_input; UI_output;}
}
")Esquema: Estructura y reactividad